<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>
	<body>
		
		<div id="app">
			<form action="http://www.baidu.com">
				用户名：<input type="text" v-model="user.username"/><br />
				密码：<input type="password" v-model="user.password" /><br/>
				<br/>
				 用户详情：<textarea v-model="user.info"></textarea>
				 <br />
				 <select name="book" v-model="user.book">
					 <option value="Java编程基础1">Java编程基础</option>
					 <option value="Java编程进阶1">Java编程进阶</option>
					 <option value="Java编程高级1">Java编程高级</option>
				 </select>
				  <br />
				性别：<input type="radio" value="男1" v-model="user.gender"/>男
				<input type="radio" value="女1"  v-model="user.gender"/>女
				 <br />
				 爱好：<input type="checkbox" name="hobby" value="吃1"
				 v-model="user.hobby"/>吃
				 <input type="checkbox" name="hobby" value="喝1"  v-model="user.hobby"/>喝
				 
				 
				<!-- prevent阻止action提交 -->
				<input type="submit" value="提交" @click.prevent="addForm"/>
			</form>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
				user:{
					username:'',
					password:'',
					info:'',
					book:'Java编程基础1',
					gender:'男1',
					hobby:["吃1"]
				}
				},
				methods:{
				addForm(){
					console.log(this.user.username)
					console.log(this.user.password)
					console.log(this.user.info)
					console.log(this.user.book)
					console.log(this.user.gender)
					console.log(this.user.hobby)
				}
				}
			})
		</script>
	</body>
</html>
